<template>
	<view>
		<view class="nav">
			<scroll-view scroll-x style="position: absolute;bottom: 0;right: 0;left: 0;">
				
					<view style="display: flex;flex-flow: row nowrap;">
						<text  v-for="(item,i) of titles" :key="i" style="margin: 0 5px;white-space: nowrap;padding: 6px;" :class="{cur:i == current}" @click="current = i">{{item}}</text>
					</view>
				
			</scroll-view>
		</view>
		<view >
			<scroll-view :scroll-y="true" :style="{height:`${fHeight}px`}">
				<!-- 学子商城 -->
				<view v-if="current == 0">
					<uni-list>
						<uni-list-item v-for="(item,i) of data.data">
							<view slot="header" style="margin-right: 10px;">
								<image  :src="`http://101.96.128.94:9999/${item.pic}`" mode="widthFix" style="width: 200rpx;"></image>
							</view>
							<view slot="body" class="detail">
								<text>{{item.title}}</text>
								<text style="color: #FF0000; font-size: 25px; margin-top: 10px;">¥{{item.price}}</text>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
				<!-- 网易新闻 -->
				<view v-else-if="current == 1">
					<uni-list>
						<uni-list-item v-for="(item,i) of result" :key="i">
							<view slot="header" style="margin-right: 10px;">
								<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view slot="body" class="detail wy">
								<text>{{item.title}}</text>
								<text style="color: gray;">{{item.passtime}}</text>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
				<view v-else-if="current == 2"></view>
				<view v-else></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			titles:["学子商城","网易新闻","待定","待定","待定","待定","待定","待定"],
			current:0,
			// #ifdef H5
			url:"/xz/product/list.php",
			url_wy:"/wy/getWangYiNews",
			// #endif
			
			// #ifndef h5
			url:"http://101.96.128.94:9999/data/product/list.php",
			url_wy:"https://api.apiopen.top/getWangYiNews",
			// #endif
			data:{},
			result:[]
		};
	},
	computed:{
		fHeight(){
			return uni.getSystemInfoSync().windowHeight - 50
		}
	},
	onReady() {
		this.getData()
		this.getWy()
	},
	methods: {
		getWy(){
			uni.request({
				url: this.url_wy,
				method: 'GET',
				data: {page:1},
				success: res => {
					console.log(res);
					this.result = res.data.result
				},
				fail: () => {},
				complete: () => {}
			});
		},
		getData(){
			uni.request({
				url: this.url,
				method: 'GET',
				data: {pno:1},
				success: res => {
					console.log(res);
					this.data = res.data
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style>
	.detail {
		display: flex;
		flex-flow: column nowrap;
		align-items: left;
	}
	.wy {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
	}
	.detail > text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box; 
		-moz-line-clamp: 2; 
		-moz-box-orient: vertical; 
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;   
	}
	.nav {
		height: 50px;
		background-color: #007AFF;
		color: #fff;
		position: relative;
	}
	.text {
		display: flex;
		flex-flow: column nowrap;
	}
	.cur{
		color: orange;
		border-bottom: 3px solid orange;
		font-weight: bold;
	}
</style>
